<template>
  <view class="content">
	  <view class="recommend" v-if="cartList.length === 0">
		  <view class="title">
		  	亲 ！ 你还没有添加商品哦 赶快去看看吧 ！
		  </view>
		  <navigator open-type="switchTab" url="../index/index">快去首页看看吧</navigator>
	  </view>
    <view class="cart_list" v-for="(item, index) in cartList" :key="index">
      <view
        @click="onState(index)"
        :class="
          item.checked ? 'iconfont icon-xianshi_xuanzetianchong' : 'iconfont icon-unselect-radio2'
        "
      ></view>
      <view class="cart_img"
        ><image :src="item.goods_big_logo" mode=""></image
      ></view>
      <view class="cart_title">
        <view class="title_top">{{ item.goods_name }}</view>
        <view class="title_buttom">
          <view class="title_buttom_left">￥{{ item.goods_price }}</view>
          <view class="title_buttom_right">
            <text class="subtract" @click="subtract(index)">-</text>
            <text>{{ item.num }}</text>
            <text class="add" @click="add(index)">+</text>
          </view>
        </view>
      </view>
    </view>
    <view class="total_price">
      <view class="total_price_left">
        <text
          @click="allCheacked"
          :class="
            isAllCheaed ? 'iconfont icon-xianshi_xuanzetianchong' : 'iconfont icon-unselect-radio2'
          "
        ></text>
        <text class="ail">全选</text>
        <text class="add">合计:</text>
        <text class="price">￥{{ price }}</text>
      </view>
      <view class="total_price_right" @click="gopay">
        去结算<text>({{ num }})</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cartList: [],
    };
  },
  async onShow() {
    // 把储存的数据取出来
    const [error, res] = await uni.getStorage({
      key: "cart",
    })
	if(res){
		this.cartList = res.data
	}
  },
  computed: {
    price() {
      // 用当前的价格乘以当前选中的状态
      // 计算价格 使用计算属性 看起来是函数 用起来是属性 需要把数据 return 回去
      // 遍历当前要计算的数据数组  拿到遍历后的数据 使用价格乘以数量
      // 在进行添加即可
      let price = 0;
      this.cartList.length &&
        this.cartList.forEach((item) => {
          // 当选中的时候就计算
          if (item.checked) {
            price += item.goods_price * item.num;
          }
        });
      return price;
    },
    // 监听全选状态
    isAllCheaed() {
      // 使用监听属性监听选中的值  默认值是一个false  需要遍历出当前数据
      // 判断 如果有一个是没有选中的状态 则就是没有全选
      let allCheacked = true;
      this.cartList.length &&
        this.cartList.forEach((item) => {
          if (!item.checked) {
            allCheacked = false;
          }
        });
      return allCheacked;
    },
    // 监听全选选择状态的数量
    num() {
      let num = 0;
      // 遍历当前的数据
      this.cartList.forEach((item) => {
        // 判断是否选中的状态 选中的状态就相加
        if (item.checked) {
          num += item.num;
        }
      });
      return num;
    },
  },
  // onHide() {
  //   uni.setStorage({
  //     key: "cart",
  //     data: this.cartList,
  //   });
  // },
  // 使用watch 监听当前的数组变化 变化之后就 把数组储存到本地
  watch: {
    cartList: {
      handler() {
        uni.setStorage({
          key: "cart",
          data: this.cartList,
        });
      },
      deep: true, // 深度监听
    },
  },
  methods: {
    // 点击跳转到支付页面
    gopay() {
      uni.navigateTo({
        // 把总价格和总数量传递过去
        url: `../pay/index?price=${this.price}&num=${this.num}`,
      });
    },
    // 点击全选状态
    allCheacked() {
      // 遍历出当前的值 修改当前的 保留当前的值 修改的值
      const cart = this.cartList.map((item) => {
        return { ...item, checked: !this.isAllCheaed };
      });
      this.cartList = cart;
    },
    // 点击加号时触发
    add(index) {
      this.cartList[index].num++;
    },
    // 点击减的时触发
    subtract(index) {
      if (this.cartList[index].num === 1) {
        // 当商品的数量等于一的时候 就提示用户是否要删除改商品 点击删除的话就删除当前点击的商品
        uni.showModal({
          title: "提示",
          content: "确定删除该删除吗",
          confirmText: "删除",
          success: (res) => {
            if (res.confirm) {
              this.cartList.splice(index, 1);
            }
          },
        });
      } else {
        this.cartList[index].num--;
      }
    },
    // 点击选是否选中状态
    onState(index) {
      // 点击是把值取反
      this.cartList[index].checked = !this.cartList[index].checked;
      // 重新赋值一个新的数组 使用splice 方法
      this.cartList.splice(index, 1, this.cartList[index]);
    },
  },
};
</script>

<style lang="less">
.content {
  margin-bottom: 83rpx;
  .recommend{
	  height: 100vh;
	  line-height: 45vh;
	  padding-top: 300rpx;
	   navigator,
	  .title{
		  display: flex;
		  height: 100rpx;
		  justify-content: center;
		  align-items: center;
	  }
  }
  .cart_list {
    display: flex;
    margin: 27rpx 27rpx 0 27rpx;
    padding: 9rpx 0;
    height: 209rpx;
    align-items: center;
    .iconfont {
      width: 78rpx;
      font-size: 40rpx;
    }
    .icon-xianshi_xuanzetianchong {
      width: 78rpx;
      font-size: 40rpx;
      color: #e03440;
    }
    .cart_img {
      height: 191rpx;
      width: 191rpx;
      margin-right: 19rpx;
      image {
        height: 100%;
        width: 100%;
      }
    }
    .cart_title {
      width: 410rpx;
      .title_top {
        height: 66rpx;
        font-size: 24rpx;

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .title_buttom {
        display: flex;
        margin-top: 80rpx;
        justify-content: space-between;
        .title_buttom_left {
          color: #e03440;
          font-size: 24rpx;
        }
        .title_buttom_right {
          text {
            margin: 0 15rpx;
            font-size: 24rpx;
          }
          .subtract,
          .add {
            height: 32rpx;
            width: 32rpx;
            display: inline-block;
            border: 1rpx solid #ccc;
            text-align: center;
            line-height: 28rpx;
            border-radius: 50%;
          }
        }
      }
    }
  }
  .total_price {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 83rpx;
    width: 750rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .total_price_left {
      margin-left: 23rpx;
      .icon-xianshi_xuanzetianchong {
        font-size: 40rpx;
        color: #e03440;
      }
	  
      .ail {
        color: #8a8a8a;
        font-size: 21rpx;
        margin: 0 36rpx 0 24rpx;
      }
      .add {
        font-size: 26rpx;
        color: #000;
        margin-right: 15rpx;
      }
      .price {
        color: #e03440;
        font-size: 24rpx;
      }
    }
    .total_price_right {
      width: 150rpx;
      height: 52rpx;
      background-color: #e03440;
      font-size: 21rpx;
      color: #fff;
      border-radius: 26rpx;
      line-height: 52rpx;
      text-align: center;
      margin-right: 23rpx;
    }
  }
}
</style>
